<template>
  <div class="mod-customers">
    <el-main
      v-loading="swiperLoading"
      class="el-main"
    >
      <div class="d-customers over">
        <div class="arrow-box">
          <div
            id="prev"
            ref="prevRef"
            class="arrow prev disable"
            @click="prevPart()"
          />
          <div
            id="next"
            ref="nextRef"
            class="arrow next"
            @click="nextPart()"
          />
        </div>
        <div
          ref="boxRef"
          class="customers-box"
        >
          <div
            ref="contentRef"
            class="customers-content"
          >
            <div
              v-for="index of 7"
              id="totalMember"
              :key="index"
              :class="[ indexSwitch === index -1 ? 'is-select statis-item' :'statis-item' ]"
              @click="onClickStatis(index - 1,$event)"
            >
              <h4 class="statis-item__title">
                {{ data.title[index - 1] }}
              </h4>
              <p class="statis-item__data">
                {{ data.num[index - 1] }}
              </p>
              <br>
              <span
                class="change-trend change-trend--decline"
                :style="{color: data.rate[index-1] === 0 ? 'unset' : data.rate[index-1] > 0 ? '#3CC480' : '#FF4141'}"
              >
                <span class="change-trend__title">{{ compareDate }}</span>
                <span class="change-trend__data">

                  <el-icon
                    v-if="data.rate[index - 1] === 0"
                    style="font-weight: 900"
                  ><Minus /></el-icon>
                  <el-icon
                    v-else-if="data.rate[index - 1] > 0"
                    style="font-weight: 900"
                  ><Top /></el-icon>
                  <el-icon
                    v-else
                    style="font-weight: 900"
                  ><Bottom /></el-icon>
                  <span
                    v-if="data.rate[index - 1] !== 0"
                  >{{ Math.abs(data.rate[index - 1]) + '%' }}</span>
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script setup>

const emit = defineEmits(['updateData', 'changeOneEchart'])

let isMove = ref(false) // 当内容宽度大于盒子宽度，isMove为true，反之为false
const props = defineProps({
  data: {
    type: Object,
    default: null
  },
  compareDate: {
    type: String,
    default: ''
  },
  swiperLoading: {
    type: Boolean,
    default: false
  }
})
const screenWidth = ref('') // 屏幕宽度

onMounted(() => {
  nextTick(() => {
    emit('changeOneEchart', props.data.title[0])
  })

  screenWidth.value = document.body.offsetWidth
  // 监听游览器窗口变化
  window.addEventListener('resize', function () {
    screenWidth.value = document.body.offsetWidth
  })
})
const rateRatio = reactive({
  couponMemberRate: 0,
  memberPayAmountRate: 0.00,
  memberPayOrderRate: 0.00,
  memberSingleAmountRate: 0,
  newMemberRate: 0,
  payMemberRate: 0,
  totalMemberRate: 0
})
watch([rateRatio, screenWidth], () => {
  judgeSize()
}, { deep: true })
const indexSwitch = ref(0)
const onClickStatis = (index, e) => {
  indexSwitch.value = index
  emit('changeOneEchart', e.currentTarget.getElementsByClassName('statis-item__title')[0].innerText)
  emit('updateData', index)
}
// 左箭头
const contentRef = ref(null)
const prevRef = ref(null)
const nextRef = ref(null)
const prevPart = () => {
  if (isMove === true) {
    if (contentRef.value.style.left !== '0px') {
      contentRef.value.style.left = '0'
      contentRef.value.style.right = ''
      prevRef.value.style.cursor = 'not-allowed'
      nextRef.value.style.cursor = 'pointer'
    }
  }
}
// 右箭头
const nextPart = () => {
  if (isMove === true) {
    if (contentRef.value.style.right !== '0px') {
      contentRef.value.style.right = '0'
      contentRef.value.style.left = ''
      prevRef.value.style.cursor = 'pointer'
      nextRef.value.style.cursor = 'not-allowed'
    }
  }
}
// 判断内容和盒子的大小
const boxRef = ref(null)
const judgeSize = () => {
  nextTick(() => {
    if (contentRef.value.clientWidth > boxRef.value.clientWidth) {
      isMove = true
      if (contentRef.value.style.right === '0px') {
        prevRef.value.style.cursor = 'pointer'
      } else {
        nextRef.value.style.cursor = 'pointer'
      }
    } else {
      isMove = false
      prevRef.value.style.cursor = 'not-allowed'
      nextRef.value.style.cursor = 'not-allowed'
      contentRef.value.style.left = ''
      contentRef.value.style.right = ''
    }
  })
}

</script>

<style lang="scss" scoped>
.mod-customers {
  .over {
    padding: 0 32px;
  }
  :deep(.el-main)  {
    padding: 0;
  }

  .statis-item .statis-item__data{
    margin: 10px 0 20px 0;
    height: 0;
  }
  .d-customers {
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;

    // 两个左右切换的按钮
    .arrow-box {
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
      left: 0;
      width: 100%;
    }
    .over .arrow-box {
      display: block;
    }
    .arrow-box .arrow {
      width: 22px;
      height: 22px;
      background: #eee;
      position: absolute;
      z-index: 2;
      border-radius: 50%;
      cursor: pointer;
    }
    .arrow-box .arrow.disable {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .arrow-box .arrow.prev {
      left: 0;
      transform: rotate(180deg);
    }
    .arrow-box .arrow.next {
      right: 0;
    }
    .arrow-box .arrow::before,
    .arrow-box .arrow::after {
      position: absolute;
      top: 6px;
      display: block;
      width: 0;
      height: 0;
      content: " ";
      font-size: 0;
      border: 5px solid transparent;
    }
    .arrow-box .arrow::before {
      left: 10px;
      border-left: 5px solid #999;
    }
    .arrow-box .arrow::after {
      left: 8px;
      border-left: 5px solid #eee;
    }

    // 展示框
    .customers-box {
      position: relative;
      height: 127px;
      margin: 20px 0;
      overflow: hidden;

      .customers-content{
        position: absolute;
        bottom: 0;
      }
      .statis-item {
        box-sizing: border-box;
        width: 200px;
        height: 127px;
        padding: 16px;
        border: 1px solid #dcdee0;
        border-radius: 4px;
        cursor: pointer;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 8px;
      }
      .statis-item.is-select {
        background: #f5faff;
        border-color: #155bd4;
      }
      .statis-item:last-child{
        margin-right: 0;
      }
      .statis-item__title {
        font-weight: normal;
        font-size: 14px;
        line-height: 14px;
        height: 14px;
        display: inline-block;
        margin: 0;
        color: #666666;
      }
      .statis-item__data {
        font-size: 20px;
        font-weight: bold;
      }
      .statis-item:hover {
        border: #155bd4 solid 1px;
        cursor: pointer;
      }
    }
    .change-trend__title,
    .change-trend__data {
      font-size: 12px;
    }
  }
}
</style>
